<!doctype html>
<html>
<head>
    <title>注册</title>
    <meta charset="UTF-8">

    <script src="../../js/jquery-2.0.3.min.js"></script>

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <script src="../../js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../../css/bootstrapValidator.css">
    <script src="../../js/bootstrapValidator.js"></script>

</head>

<body>


<div id="content" class="container">

    <div class="text-right">
        <a href="/pages/reglog/login.html" class="btn btn-default">登录</a>
        <a href="/pages/reglog/register.html" class="btn btn-default">注册</a>
    </div>

    <form action="" id="formId" class="form-horizontal" method="post" modelAttribute="user">

        <div class="form-group">
            <label class="col-lg-3 control-label">手机</label>
            <div class="col-lg-5">
                <input type="text" id="mobilephone" name="mobilephone" class="form-control" placeholder="手机号"
                >
            </div>
        </div>


        <div class="form-group">
            <label class="col-lg-3 control-label">昵称</label>
            <div class="col-lg-5">
                <input type="text" class="form-control" name="name" id="name" placeholder="昵称"
                       value=""
                       required="required" data-bv-notempty-message="昵称不能为空">
            </div>
        </div>


        <div class="form-group">
            <label class="col-lg-3 control-label">验证码</label>
            <div class="col-lg-3">
                <input type="text" name="code" id="code" placeholder="验证码"
                       class="form-control">
            </div>

            <div class="col-lg-2" id="endtime">
                <a class="btn-default btn btn-info btn-block" href="javascript:;">10</a>
            </div>

            <div class="col-lg-2" id="getSMSD">
                <a id="getSMS" class="btn-default btn btn-info btn-block" href="javascript:;">获取验证码</a>
            </div>
        </div>


        <div class="form-group">
            <label class="col-lg-3 control-label">密码</label>
            <div class="col-lg-5">
                <input type="password" name="password" id="password"
                       class="form-control" required="required" data-bv-notempty-message="密码不能为空"
                       data-bv-stringlength="true"
                       data-bv-stringlength-min="6" data-bv-stringlength-max="30"
                       data-bv-stringlength-message="密码长度不得小于6，不得超过30 ">
            </div>
        </div>


        <div class="form-group">
            <label class="col-lg-3 control-label">确认密码</label>
            <div class="col-lg-5">
                <input type="password" name="passwordAffirm" id="p2" placeholder="确认密码"
                       class="form-control">
            </div>
        </div>

        <div class="form-group">
            <div class=" col-lg-5 col-lg-offset-3">
                <!--<input type="submit" class="btn btn-info btn-block" value="提交" on-click="">-->
                <a href="javascritp:;" class="btn btn-info btn-block btn-submit">提交</a>
            </div>
        </div>


    </form>


</div>

<script>
    var Send_SMS_Code = function sendSMS() {
        remainTime();
        $("#endtime").show();
        $("#getSMSD").hide();
        var phone = $("#mobilephone").val();
        $.ajax({
            url: "/auth/register/sendSMS",    //请求的url地址
            dataType: "json",   //返回格式为json
            async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            data: {"phone": phone},    //参数值
            type: "POST",   //请求方式
            success: function (data) {
//请求成功时处理
                alert("验证码发送成功！");
            },
            error: function (data) {
//请求出错处理
                alert("error：" + data);
            }
        });
    }


    var i = 60;
    function remainTime() {
        if (i == 0) {
            $("#getSMSD").show();
            $("#endtime").hide();
            i = 60;
            return;
        }
        $('#endtime .btn').html(i--);
        setTimeout("remainTime()", 1000);
    }

    $(function () {
        $("#endtime").hide();


        $("#getSMS").click(Send_SMS_Code);

        $('#formId').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                mobilephone: {
                    validators: {
                        notEmpty: {
                            message: '手机不能为空'
                        },
                        stringLength: {
                            /*长度提示*/
                            min: 11,
                            max: 11,
                            message: '手机长度必须是11位'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: '/auth/register/UserExists',//验证地址
                            message: '用户已存在',//提示消息
                            delay: 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                            /**自定义提交数据，默认值提交当前input value
                             *  data: function(validator) {
return {
password: $('[name="passwordNameAttributeInYourForm"]').val(),
whatever: $('[name="whateverNameAttributeInYourForm"]').val()
};
}
                             */
                        }
                    },
                    threshold: 11//有11字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，11字符以上才开始）
                },
                code: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        },
                        stringLength: {
                            /*长度提示*/
                            min: 6,
                            max: 6,
                            message: '验证码必须是6位'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: '/auth/register/isRightIndentifyingCode',//验证地址
                            message: '验证码不正确',//提示消息
                            delay: 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST',//请求方式
                            data: function (validator) {
                                return {
                                    mobilephone: $('[name="mobilephone"]').val(),
                                    code: $('[name="code"]').val()
                                };
                            }
                        }
                    },
                    threshold: 6
                }
                ,
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            /*长度提示*/
                            min: 6,
                            max: 20,
                            message: '手机长度必须大于6位'
                        }/*最后一个没有逗号*/
                    }
                },
                passwordAffirm: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        identical: {//相同
                            field: 'password', //需要进行比较的input name值
                            message: '两次密码不一致'
                        },
                    }
                }
            }
        });

        $(".btn-submit").bind("click", function () {

            var bootstrapValidator = $("#formId").data('bootstrapValidator');
            var validate = bootstrapValidator.validate();

            //判断是否验证通过
            var valid = bootstrapValidator.isValid();
            if (valid) {
                $.ajax({
                    type: "post",
                    url: "/auth/register/submit",
                    data: {
                        mobilephone: $("#mobilephone").val(),
                        name: $("#name").val(),
                        password: $("#password").val(),
                        is_auto_login: $("#is_auto_login").val()
                    },
                    success: function (data) {
                        if (data["code"] == "0000") {
                            alert("注册成功！");
                            window.location.href = "/pages/reglog/login.html"
                        } else {
                            $(".error_password").show();
                        }
                    },
                    error: function (xhr, type) {
                        console.log(xhr);
                    }
                });

            } else {
//                alert("验证不通过");
            }
        });
    });

</script>

</body>
</html>
